<template>
	<div id="homeEarth">
		<!--<h1>3D地球</h1>-->
		<div class="chartBox" id="earth"></div>
	</div>
</template>

<script>
    import Echarts from 'echarts';
    import earthBg from '@/assets/img/bg_world.topo.bathy.200401.jpg';

    export default {
        name: "Earth3d",
        mounted() {
            let myChart = Echarts.init(document.getElementById('earth'));
            this.$fetch('/data/HomePage_earth3d_data.json')
                .then((res) => {
                    console.log('HomePage_earth3d_flights', res);
                    drawEarth3d(res)

                }).catch(err => {
                console.log(err)
            });

            function drawEarth3d(res) {
                const dataFromInterface = res.data;
                const coordsXiAn = [109.1162, 34.2004]; //西安经纬度
                // 散点数据
                const mapDataScatters = dataFromInterface.concat([{
                    name: '西安',
                    latitude: 109.1162,
                    longitude: 34.2004
                }]).map(function (item) {
                    return {
                        name: item.name,
                        value: [item.latitude, item.longitude]
                    }
                });
                // 连线数据
                const mapDataLines = dataFromInterface.map(function (item) {
                    return {
                        name: item.name,
                        coords: [[item.latitude, item.longitude], coordsXiAn]
                    }
                });

                let series = [{//绘制点
                    type: 'scatter3D',
                    coordinateSystem: 'globe',
                    blendMode: 'lighter',
                    symbolSize: 3,
                    itemStyle: {
                        color: 'rgb(150, 150, 250)',
                        opacity: 1
                    },
                    label: {
                        show: false,//不知如何取消鼠标移上去后触发的动作
                        formatter: '{b}',
                        distance: 15
                    },
                    data: mapDataScatters
                }, {//绘制线
                    type: 'lines3D',
                    effect: {
                        show: true,
                        trailWidth: 1.5,
                        trailLength: 0.25,
                        trailOpacity: .7,
                        trailColor: 'rgb(250, 250, 255)'
                    },

                    lineStyle: {
                        width: 1,
                        color: 'rgb(50, 50, 150)',
                        opacity: .6
                    },
                    blendMode: 'lighter',

                    data: mapDataLines
                }];

                myChart.setOption({//地球背景图
                    globe: {
                        baseColor: '#83a6ff',
                        // environment: '#000',
                        baseTexture: earthBg,
                        globeRadius: 80,
                        viewControl: {
                            // autoRotate: false,
                            autoRotateSpeed: 9,
                            alpha: 33,
                            beta: 135,
                            // targetCoord: [87.68, 43.77]//可以定位到乌鲁木齐等城市
                        },
                    },
                    tooltip: {
                        show: false,
                        // formatter:'{}'
                    },
                    series: series
                });
            }
        }
    }
</script>

<style scoped>
	#homeEarth {
		height: 100%;
	}
	
	.chartBox {
		height: 100%;
		background: radial-gradient(circle closest-side at 50% 50% , black 70%,transparent );;
	}
</style>